<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<head>
    <title>Title</title>
    <link rel="icon" th:href="@{/docs/4.0/assets/img/favicons/favicon.ico}">

    <title>Signin Template for Bootstrap</title>

    <link rel="canonical" th:href="@{https://getbootstrap.com/docs/4.0/examples/sign-in/}">
    <!-- Bootstrap core CSS -->
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link th:href="@{/css/signin.css}" rel="stylesheet">
    <script>
        function getLineCaptcha() {
            fetch('/createLineCaptcha')
                .then(response => response.blob())
        .then(blob => {
                const url = window.URL.createObjectURL(blob);
            const img = document.getElementById('captcha-image');
            img.src = url;
        });
        }
    </script>
    <script>
        window.onload = function() {
            getLineCaptcha();
        };
    </script>
</head>
<body>
<form class="form-signin" action="/login" method="post">
    <img class="mb-4" src="/img/logo2.png" alt="" width="276">
    <h1 class="h3 mb-3 font-weight-normal text-center" style="color:white">登录</h1>
    <p style="color:white" class="text-center" th:text="${msg2}"></p>
    <p style="color:white" class="text-center" th:text="${msg3}"></p>
    <p style="color:white" class="text-center" th:text="${msg4}"></p>
    <p style="color:white" class="text-center" th:text="${msg5}"></p>
    <p style="color:white" class="text-center" th:utext="${msg7}"><a href="">点击此处</a><span>首页</span></p>
    <label for="inputEmail" class="sr-only">Account</label>
    <input type="text" id="inputEmail" class="form-control" placeholder="账号" required autofocus name="uid" th:value="${userid}">
    <p></p>
    <label for="inputPassword" class="sr-only">Password</label>
    <input type="password" id="inputPassword" class="form-control" placeholder="密码" required name="userpwd">
    <p></p>
    <div style="display: flex">
        <input type="code" id="inputCode" class="form-control" placeholder="请输入验证码" required name="code" style="margin-right: 10px">
        <p></p>
        <img id="captcha-image" alt="验证码" src="/createLineCaptcha" onclick=getLineCaptcha() style="border-radius: 5px;" />
    </div>
    <p></p>
    <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
    <p></p>
    <a th:href="@{/toRegister}" class="btn btn-success">------------------>注册<-----------------</a>
</form>
</body>


</html>